<script>
import {NIcon} from 'naive-ui'
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Loading",
  components: {
    NIcon,
  },
  props: {
    size: {
      type: Number,
      default: 24,
    },
  },
})
</script>

<template>
  <n-icon :size="size">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         style="margin: auto; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;"
         width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <circle cx="50" cy="50" r="32" stroke-width="8" stroke="#4d695d"
              stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round"
              style="animation-play-state: running; animation-delay: 0s;">
        <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1"
                          values="0 50 50;360 50 50"
                          style="animation-play-state: running; animation-delay: 0s;"></animateTransform>
      </circle>
      <circle cx="50" cy="50" r="23" stroke-width="8" stroke="#d2d2cb"
              stroke-dasharray="36.12831551628262 36.12831551628262" stroke-dashoffset="36.12831551628262" fill="none"
              stroke-linecap="round" style="animation-play-state: running; animation-delay: 0s;">
        <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1"
                          values="0 50 50;-360 50 50"
                          style="animation-play-state: running; animation-delay: 0s;"></animateTransform>
      </circle>
      <!-- [ldio] generated by https://loading.io/ --></svg>
  </n-icon>
</template>

<style scoped>

</style>